<template>
  <view>
    <view class="title"> </view>
    <form @submit="deleteAccountSubmit">
      <view class="input-info">
        <view class="inline-text">电话</view>
        <input class="inline-text" type="text" name="phone" v-model="phone" />
        <view class="inline-text">验证码</view>
        <view style="display: grid; grid-template-columns: 50% 50%">
          <input class="inline-text" type="text" name="autoCode" />
          <view>
            <button v-if="!cannotSendMessage" @click="sendMsgSubmit">
              发送验证码
            </button>
            <button v-else disabled="true">等待中 {{ second_remain }} s</button>
          </view>
        </view>
      </view>
      <button form-type="submit" type="warn">注销账户</button>
    </form>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      phone: "",
      cannotSendMessage: false,
      second_remain: 0,
    };
  },
  computed: mapState(["localData"]),
  methods: {
    countDown: function () {
      this.second_remain = 60;
      this.cannotSendMessage = true;
      let c0untD0wN = setInterval(() => {
        if (this.second_remain > 0) {
          this.cannotSendMessage = true;
          this.second_remain--;
        } else {
          clearInterval(c0untD0wN);
          this.cannotSendMessage = false;
        }
      }, 1000);
    },
    sendMsgSubmit: function () {
      this.countDown();
      uni.showLoading({ title: "加载中" });
      if (this.localData.phone !== this.phone) {
        uni.showToast({ title: "电话错误", icon: "error" });
      }
      let postData = {
        option: "sendMessage",
        phone: this.phone,
      };
      console.log("sendmsg", postData);
      this.$http
        .post(this.urlApi.user, postData)
        .then((res) => {
          console.log(res.data);
          uni.hideLoading();
          let status = res.data.status;
          // this.res_status = status;
          switch (status) {
            case "100": {
              uni.showToast({ title: "老用户 短信发送成功" });
              break;
            }
            case "101": {
              uni.showToast({ title: "老用户 短信发送失败", icon: "error" });
              break;
            }
            case "200": {
              uni.showToast({ title: "您是新用户" });
              break;
            }
            case "201": {
              uni.showToast({ title: "新用户 短信发送失败", icon: "error" });
              break;
            }
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({ title: "请求失败", icon: "error" });
          console.log(err);
        });
    },
    deleteAccountSubmit: function (e) {
      let values = e.detail.value;
      if (this.localData.status !== "100") {
        uni.showToast({ title: "注销失败", icon: "error" });
        return;
      }
      let postData = {
        option: "deleteUser",
        phone: values.phone,
        autoCode: values.autoCode,
      };
      console.log("deleteAccount", postData);
      this.$http
        .post(this.urlApi.user, postData)
        .then((res) => {
          let status = res.data.status;
          switch (status) {
            case "100": {
              uni.showToast({ title: "注销成功", icon: "success" });
              break;
            }
            case "101": {
              uni.showToast({ title: "验证码错误", icon: "error" });
              break;
            }
            case "102": {
              uni.showToast({ title: "未知错误 注销失败", icon: "error" });
              break;
            }
          }
        })
        .catch((err) => {
          console.log(err);
          uni.showToast({ title: "请求错误", icon: "error" });
        });
    },
  },
};
</script>

<style>
.input-info {
  margin: 0 auto;
  width: 90%;
  display: grid;
  grid-template-rows: 50% 50%;
  grid-template-columns: 25% 75%;
}
.inline-text {
  font-size: 0.8em;
  padding: 5px;
  margin: 5px;
  overflow: hidden;
  white-space: nowrap;
}
uni-input {
  border: grey 1px solid;
  border-radius: 5px;
  font-size: 1em;
}
.title {
  text-align: center;
  font-size: 2em;
}
</style>